html{
    font-size: 15px;
    a{
        text-decoration: none;
        color: gray;
    }
    body{
        display: grid;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-content: center;
        nav{
            // overflow: hidden;
            display: grid;
            grid-template-columns: repeat(6,100px);  
            a{
                display: grid;
                justify-content: center;
                align-items: center;
                padding: 5px 15px;
                @for $i from 1 to 7 {
                    &[href]:hover:nth-child(#{$i}) ~ .line{
                        transform: translateX(#{$i *100 - 100 }px);
                    }

                    &:nth-child(#{$i}).active ~ .line{
                        transform: translateX(#{$i * 100 - 100}px);
                    }
                }
            }
            .line{
                width: 100px;
                height: 5px;
                background: linear-gradient(to right,white, #2ecc71,#e67e22,#3498db,white);
                transform: translateX(-100px);
                transition-duration: 0.5s;
            }
        }
    }
}